<script lang="ts" setup>
// defineProps 来接受 defineProps是无须引入的直接使用即可
// defineProps<{
//     title:string,
//     data:number[]
// }>()
import { reactive,ref } from "vue";
type Props = {
  title?: string;
  data?: number[];
};
withDefaults(defineProps<Props>(), {
  title: "张三",
  data: () => [1, 2, 3],
});

// withDefaults是个函数也是无须引入开箱即用接受一个props函数第二个参数是一个对象设置默认值

// 子组件给父组件传参是通过defineEmits派发一个事件

const emit = defineEmits(["on-click"]);
const toParent = () => {
  emit("on-click", "toParent");
};


//  子组件暴露一个实例，父组件通过 ref 可以得到
let list = reactive<number[]>([11,22,33])
let count = ref(0)
const logHello = () => {
    console.log("hello");
}
defineExpose({
    list,count,logHello
})
</script>
<template>
  <div>{{ title }}</div>
  <div>{{ data }}</div>
  <div>
    <button @click="toParent">传递值给父组件</button>
  </div>
</template>
